<template>
  <div class="comments_page">
    <div class="commons_top">
      <div class="commons_back" @click="$router.go(-1)">
        <img src="@/assets/index/back.png" />
      </div>
      <span class="commons_title">全部评论</span>
    </div>
    <div class="review_listBox">
      <review :reviewData="reviewData" :reviewType="reviewType" :postId="listQuery.resourceId" 
        :listNull="listNull" v-on:nextList="nextList" :loading="loading" v-on:myList="agreeBtn($event)"></review>
    </div>
    <div class="comments_box">
      <div class="comments_input" @click="reviewBtn">内容这么赞，快来评论吧！</div>
    </div>
  </div>
</template>

<script>
import '@static/css/common.css'
import { Toast } from 'mint-ui';
import { getReview, agreeReview } from '@/api/review.js'
import { reviewAPI, agreeAPI } from '@/api/course.js'
import review from '@/components/review'

export default {
  name: 'comments',
  components:{
    review
  },
  data() {
    return {
      listQuery:{
        resourceId: null,
        resourceType: null,
        resourceName: null,
        pageSize: 20,
        pageNum: 1
      },
      totalPage: null,
      reviewData:[],
      isIphoneX: false,
      reviewType: '',
      listNull:false,
      loading: false,
    }
  },
  mounted() {
    this.listQuery.resourceId = this.$route.query.resourceId
    this.listQuery.resourceType = this.$route.query.resourceType
    this.listQuery.resourceName = this.$route.query.resourceName
    if (this.listQuery.resourceType == 4) {//视频
      this.reviewType = 'video'
    }
    if (this.listQuery.resourceType == 5) {//音频
      this.reviewType = 'audio'
    }
    this.getList()
  },
  methods: {
    getList() {
      this.loading = true
      if (this.listQuery.resourceType == 2) {//微课
        getReview(this.listQuery).then(res => {
          if (res.data.code == 0) {
            var newData = []
            if (this.listQuery.pageNum == 1) { //第一页
              newData = res.data.data.list
            } else {
              newData = this.reviewData.concat(res.data.data.list)
            }
            this.reviewData = newData
            this.totalPage = res.data.data.pages
            this.listNull = newData && newData.length > 0 ? false : true
          } else {
            Toast(res.data.msg);
          }
          this.loading = false
        })
      } else {//其他资源
        reviewAPI(this.listQuery).then(res => {
          if (res.data.code == 0) {
            let newData = []
            if (this.listQuery.pageNum == 1) { //第一页
              newData = res.data.data.list
            } else {
              newData = this.reviewData.concat(res.data.data.list)
            }
            this.reviewData = newData
            this.totalPage = res.data.data.pages
            this.listNull = newData && newData.length > 0 ? false : true
          } else {
            Toast(res.data.msg);
          }
          this.loading = false
        })
      }
    },
    nextList() {//分页
      if (this.totalPage > this.listQuery.pageNum) {//判断是否有下一页
        this.listQuery.pageNum = this.listQuery.pageNum + 1
        this.getList()
      }
    },
    agreeBtn(data) {//点赞 --- icon实现
      let that = this
      let type = data.isAgree == 0 ? 1 : 0
      agreeAPI({commentId:data.id,type:type}).then(res => {
        if (res.data.code === 0) {//点赞成功
          this.getList()
          Toast(data.isAgree == 0 ? '点赞成功' : '已取消点赞')
        } else {
          Toast(res.data.msg);
        }
      });
    },
    reviewBtn() {//评论
      if(this.isLogin()) {//是否登录
        this.$router.push({
          name:'addReview',
          query:{
            resourceType:this.listQuery.resourceType,
            resourceId:this.listQuery.resourceId,
            resourceName:this.listQuery.resourceName
          }
        })
      }
    },
  }
}
</script>

<style scoped>
.comments_page{
  position: relative;
  min-height: 100vh;
}
.review_listBox{
  padding: 0 0.25rem 0.4rem;
  padding-bottom: 1.16rem;
}
.comments_box{
  position: fixed;
  bottom: 0;
  left: 0;
  height: 1.16rem;
  background: #F7F8FA;
  width: 100%;
}
.comments_input{
  color: #C8CAD2;
  width: 90%;
  margin-left: 5%;
  background: #fff;
  height: 0.72rem;
  line-height: 0.72rem;
  border:1px solid rgba(231,236,239,1);
  border-radius:0.36rem;
  margin-top: 0.22rem;
  padding: 0 0.1rem;
  font-size: 14px;
}
</style>
